<template>
    <div id="class-mange">
        <div class="jx-content">
            <div class="class-mange-search">
                <div class="search-box fl">
                    <el-form :inline="true" :model="Form" class="fl">
                        <el-form-item label="年级 ：">
                            <el-select v-model="Form.optionsClass" placeholder="请选择年级">
                                <el-option
                                v-for="item in Form.options"
                                :key="item.value"
                                :label="item.value"
                                :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="teacher-input">
                            <el-input v-model="Form.info" placeholder="输入班级编号/名称" maxlength="20"></el-input>
                        </el-form-item>
                    </el-form>
                    <button class="button-style" @click="search">搜 索</button>
                </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="deleteFn">批量删除</button>
                </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="addClass(1)" >添 加</button>
                </div>
            </div>
            <div class="table">
                <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width='50'> </el-table-column>
                    <el-table-column prop="name" label="班级名称"></el-table-column>
                    <el-table-column prop="grade" label="年级" ></el-table-column>
                    <el-table-column prop="id" label="编号"></el-table-column>
                    <el-table-column prop="studentNum" label="学生数量"> </el-table-column>
                    <el-table-column  label="操作" width='180'>
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="addClass(2, scope.row.id, scope.row.grade, scope.row.name)">修改</el-button>
                            <el-button type="text" size="small" @click="GoLink(scope.row.id)">管理学生</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false"  :title="dialogClassTitle" :visible.sync="dialogClass" width="550px" @close="closeDialog">
            <el-form ref="formInline" class="demo-form-inline clearfix" :inline="true" :rules="rules" :model="formInline"  label-width="100px">
                <el-form-item label="班级名称：" prop="user">
                    <el-input v-model="formInline.user" placeholder="请输入班级名称" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="年级：">
                    <el-input-number v-model="formInline.class" controls-position="right" @change="" :min="2015"></el-input-number>
                </el-form-item>
            </el-form>
            <div class="button-style" style="width:90px; margin:0 auto; display:block" @click="classSave('formInline')">保 存</div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Form:{
                    info:'',
                    options: [
                        {
                            label: '',
                            value: '全部'
                        }
                    ],
                    optionsClass: ''
                },
                // 表格信息
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1,
                multipleSelection: [],

                // 添加修改班级弹窗
                dialogClass: false,
                addOrModify: '',
                // 修改当前班级ID
                ModifyId: '',
                dialogClassTitle: '',
                formInline:{
                    user:'',
                    class:'',
                },
                // 表单验证规则
                rules:{
                    user:[
                        { required: true, message: '请输入班级名称', trigger: 'blur' },
                    ]
                },
                tableLoading: false,

                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: "",
            }
        },
        created () {
            let self = this
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0];
            // 获取下拉列表
            self.selectList()
            // 获取列表
            self.getList()
        },
        methods: {
            // 获取下拉列表
            selectList(){
                let self = this
                self.Form.options = [
                        {
                            label: '',
                            value: '全部'
                        }
                    ]
                self.$http.get('/tes/course/queryNaturalClassInfo').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < res.data.length; i++){
                            let obj = {}
                            obj.label = res.data[i]
                            obj.value = res.data[i]
                            self.Form.options.push(obj)
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 获取列表
            getList() {
                let self = this
                self.tableLoading = true
                self.$http.get('/tes/course/queryClassInfo?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&grade='+self.Form.optionsClass+'&classInfo='+self.Form.info).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.content
                        self.totalCount = res.data.total
                        self.tableLoading = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 搜索
            search(){
                let self = this
                self.currentPage = 1
                self.getList()
            },
            // 添加班级
            addClass(type, id, grade, name){
                let self = this
                // type 1.添加 2.修改
                self.addOrModify = type
                if(type == 1){
                    self.dialogClassTitle = '添加'
                    self.formInline.user = ''
                    self.formInline.class = ''
                    self.dialogClass = true
                }else{
                    self.dialogClassTitle = '修改'
                    self.ModifyId = id
                    self.formInline.user = name
                    self.formInline.class = grade
                    self.dialogClass = true
                }
            },
            //关闭弹窗
            closeDialog(){
                let self =this
                self.$nextTick(function(){
                    self.$refs.formInline.resetFields();
                })
            },
            // 添加修改班级保存
            classSave(formInline){
                let self = this
                // 添加保存
                self.$refs[formInline].validate((valid) => {
                    if (valid) {
                        if(self.addOrModify == 1){
                            self.$http.post('/tes/course/saveClassInfo',{
                                grade: self.formInline.class,
                                name: self.formInline.user
                            }).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        })
                                    // 重新渲染列表
                                    self.getList()
                                    self.selectList()
                                    self.dialogClass = false
                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }else{
                            self.$http.put('/tes/course/natural_class/'+self.ModifyId,{
                                grade: self.formInline.class,
                                name: self.formInline.user
                            }).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$message({
                                            message: '修改成功',
                                            type: 'success'
                                        })
                                    // 重新渲染列表
                                    self.getList()
                                    self.selectList()
                                    self.dialogClass = false
                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    }
                })
            },
            //批量删除
            deleteFn(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    const loading = self.$loading({
                        lock: true,
                        text: '正在删除中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
					self.$http.post('/tes/course/natural_class/batch-delete?errorFlag=',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
                            loading.close()
                            // 重新渲染列表
                            self.getList()

                            self.selectList()
                            
                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
					},(err) => {
                        console.log('err');
                        loading.close()
					})
				}).catch(() => {
				})
            },
            // 跳转学生管理
            GoLink(classId){
                let self = this

                // 判断管理员端登录用户跳转的页面
                if (self.roles == "ADMIN" || self.roles == "SUPER_ADMIN") {
                    self.$router.push({
                        path: '/Admin/manage/ManageClass/StudentTeachMange',
                        query: { classId : classId }
                    })
                } else if (self.roles == "INTERNET_ADMIN") {
                    self.$router.push({
                        path: '/Admin/Internet/ManageClass/StudentTeachMange',
                        query: { classId : classId }
                    })
                }
            },
            //全选
			handleSelectionChange(val) {
                let self = this
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
                self.multipleSelection = valArr
            },
            //分页
			handleSizeChange: function (size) {
                let self = this
				self.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                let self = this
                self.currentPage = currentPage
                self.getList()
            },
        }
    }
</script>

<style lang="scss">
    #class-mange{
        .search-box{
            .el-input__inner{
                width: 180px;
            }
        }
        .teacher-input{
            .el-input__inner{
                width: 240px;
            }
        }
        .demo-form-inline{
            .el-button--text:hover{
                color: #1277eb;
            }
            .el-input-number.is-controls-right .el-input-number__increase{
                line-height: 15px;
            }
            .el-input-number{
                position: relative;
                display: inline-block;
                line-height: 32px;
                overflow: hidden;
                width: auto;
            }
            .el-input-number .el-input-number__increase{
                top: 1px;
            }
            .el-input-number .is-controls-right .el-input-number__decrease{
                bottom: 1px;
            }
            .el-input-number .el-input .el-input__inner{
                width: 100px;
            }
        }
    }
</style>
<style lang="scss" scoped>
    @import "./../../../styles/layout/color_variables";
    #class-mange{
        width: 1200px;
        margin: 20px auto;
        color: #727272;
        .class-mange-search{
            height: 32px;
            .button-style{
                margin-left: 15px;
            }
        }
        .el-form-item{
            margin-right: 20px;
        }
        .el-cascader{
            width: 180px;
            height: 32px;
            line-height: 32px;
            .el-input{
                width: 180px;
            }
        }

    }
    .button-style{
        width: 90px;
    }
</style>

